<template>
<!--    管理用户-->
    <div class="box">
        <el-button type="primary" @click="add" style="float: right">添加学生信息</el-button>
        <el-card class="box-card" v-for="(item, index) in list" :key="index">
            <div class="bottom" style="display: flex;align-items: center;justify-content: space-between">
                <h4>{{item.user_name}}</h4>
                <div>
                    <el-button type="text" @click="admin(item.user_id, index)">管理</el-button>
                </div>
            </div>
            <div class="bottom">{{item.student_id}}</div>
            <div class="bottom">{{item.id_card | card}}</div>
            <div class="bottom">{{item.professional}}</div>
            <div style="display: flex;align-items: center;justify-content: space-between">
                <div>{{item.type | type}}</div>
                <div>
                    <el-button type="text" @click="shanchu(item.user_id, index)" style="color: red">删除</el-button>
                </div>
            </div>
        </el-card>
        <div style="text-align: center;margin-top: 20px;cursor: pointer;width: 50%" @click="more" v-show="ismore">加载更多</div>
<!--        添加学习框-->
        <el-drawer
                title="添加学生信息"
                :visible.sync="drawer"
                :direction="direction"
        >
            <div>
                <div style="margin-bottom: 10px;font-size: 13px">学号：</div>
                <el-input
                        placeholder="请输入学号"
                        prefix-icon="el-icon-edit"
                        v-model="student_id"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">姓名：</div>
                <el-input
                        placeholder="请输入姓名"
                        prefix-icon="el-icon-user"
                        v-model="user_name"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">身份证：</div>
                <el-input
                        placeholder="请输入身份证"
                        prefix-icon="el-icon-postcard"
                        v-model="id_card"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">专业：</div>
                <el-input
                        placeholder="请输入专业"
                        prefix-icon="el-icon-suitcase-1"
                        v-model="professional"
                        style="margin-bottom: 20px"
                ></el-input>
                <el-button type="primary" @click="add1">添加</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import {getuserlist, adminuser, user, deleteuser} from '../api/api'
    export default {
        filters: {
            card(value){
                var a = value.slice(0,4)
                var b = value.slice(value.length-6,value.length)
                return a+' **** **** '+b
            },
            type(value){
                if (value == 0){
                    return value = '学生'
                }else if(value == 1){
                    return value = '校团委'
                }else {
                    return value = '导助'
                }
            }
        },
        name: "administrator",
        data(){
            return{
                list:[],
                n:1,
                ismore:true,
                drawer:false,
                direction:'rtl',
                student_id:'',
                user_name:'',
                id_card:'',
                professional:'',
            }
        },
        methods:{
            admin(user_id, index){
                this.$prompt('更改学生类型','提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    console.log(value)
                    adminuser(user_id, Number(value)).then(res=>{
                        console.log(res)
                        if(res.status == 0){
                            console.log(res)
                            this.$set(this.list[index],'type',value)
                        }
                    })
                }).catch(()=>{})
            },
            add(){
                this.drawer = true
            },
            add1(){
                user(this.student_id, this.user_name, this.id_card, this.professional).then(res=>{
                    if(res.status == 0){
                        this.drawer = false
                        this.$message({
                            showClose: true,
                            message: '添加成功',
                            type: 'success'
                        });
                        this.$router.go(0)
                    }
                })
            },
            shanchu(user_id, index){
                deleteuser(user_id).then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        this.list.splice(index,1)
                    }
                })
            },
            more(){
                this.n++
                this.get(this.n)
            },
            get(n){
                getuserlist(n).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        if(res.data.length == 0){
                            this.ismore = false
                        }
                        this.list = this.list.concat(res.data)
                    }
                })
            }
        },
        created() {
            this.get(this.n)
        }
    }
</script>

<style scoped>
    /deep/.box-card {
        margin-bottom: 20px;
        width: 50%;
    }
    .bottom {
        margin-bottom: 5px;
    }
    /deep/.el-drawer__body {
        padding: 20px;
    }
</style>
